<template>
    <!-- <div>useManualRefHistory</div>
    <p>counter:{{ counter }}</p>
    <button @click="counter++">add</button>
    <button @click="commit">commit</button>
    <button @click="undo">undo</button>
    <button @click="redo">redo</button>
    <p>history: 
        <span v-for="item in history" :key="item.timestamp">{{ item.snapshot }}</span>
    </p> -->

    <!-- <div>useActiveElement</div>
    <p>activeEle: {{ activeElement.value }}</p>
    <button>add</button>
    <input type="text"  placeholder="1" data-id="1" value="2"/> -->

    <!-- <div>useDocumentVisibility</div>
    <p v-for="(item, index) in res" :key="index">{{ item }}</p> -->

    <!-- <div>useDraggable</div>
    <div ref="dragEl" :style="style" style="position: fixed; width: 100px; height: 100px; background: yellow;" >drag me x:{{ x }} y:{{ y }}</div> -->

    <!-- <div>useDropZone</div>
    <div ref="dropzone" style="width: 300px; height: 300px; background: yellow;">drop zone</div>
    <p>isOverDropZone: {{ isOverDropZone }}</p> -->

    <!-- <div ref="bound">useElementBounding</div>
    x:{{ x }}, y:{{ y }}, left:{{ left }}, top:{{ top }}, bottom:{{ bottom }}, right:{{ right }}, width:{{ width }}, heigth:{{ height }} -->

    <!-- <div ref="rect" style="width: 300px; height: 300px; background: yellow;">useElementSize</div>
    width:{{ width }}, height: {{ height }} -->
<!-- 
    <div ref="el">useElementVisible</div>
    <p>visible: {{ isTargetVisible }}</p> -->

    <!-- <div ref="el" style="width: 300px; height: 300px; background: yellow;">useMouseInElement</div>
    x:{{ x }}, y:{{ y }}, isOutside:{{ isOutside }}, elementX:{{ elementX }}, elementY:{{ elementY }} -->

    <!-- <div ref="el">useResizeObserver</div>
    <p>{{ text }}</p> -->

    <!-- <div>useWindowFocus</div>
    <p>isfocus: {{ focused }}</p> -->

    <!-- <div style="height:1000px;">useWindowScroll <p>x:{{ x }}, y:{{ y }}</p></div> -->
    
    <!-- <div>useWindowsize</div>
    <p>width:{{ width }}, height:{{ height }}</p> -->

    <!-- <div>useBrowserLocation</div> -->

    <!-- <div>useClipboard</div>
    <input type="text" v-model="source">
    <button @click="copy">copy</button>
    <p>copy text: {{ text.target.innerHTML }}</p>
    <p>isCopied:{{ copied }}</p>
    <p>isSupport:{{ isSupported }}</p> -->

    <!-- <div ref="el">useCssVar</div> -->

    <!-- <div ref="el" style="background: yellow">useFullScreen</div>
    <button @click="toggle">toggle</button>
    <button @click="enter">enter</button>
    <button @click="exit">exit</button>
    <p>isFullScreen: {{ isFullscreen }}</p> -->

    <!-- <div >useTitle</div> -->

    <!-- <div>useWorker</div> -->

    <!-- <div>useTransition</div>
    <div>{{ output }}</div>
    <button @click="onClick">change</button> -->

    <!-- <div>useCurrentElement</div> -->

    <!-- <div>useVituralList</div>
    <div v-bind="containerProps" style="height: 300px;">
        <div v-bind="wrapperProps">
            <div v-for="(item, index) in list" :key="index" style="height: 20px;">
            {{ item }}</div>
        </div>
    </div> -->

    <!-- <testModel v-model:name="name" v-model:age="age"></testModel> -->

    <!-- <div>reactify</div> -->

    <!-- <div>useArrayEvery</div>
    <p>{{ res }}</p> -->

    <!-- <div>useTimeage</div>
    <p>{{ time }}</p> -->

    <div>useBase64</div>
    <p>{{ base64 }}</p>
</template>

<script setup>
import {useBase64} from '@vueuse/core'
import { ref } from 'vue';
const a = ref('123')
const {base64} = useBase64(a)


// import {useTimeAgo} from '@vueuse/core'
// const time = useTimeAgo(new Date(2020,1,1))
// console.log(new Date(2020,1,1))

// import {useArrayEvery} from '@vueuse/core'
// import { ref } from 'vue';
// const list = ref([1,2,3])
// const res = useArrayEvery(list, item => item < 0)


// import {reactify} from '@vueuse/core'
// import { ref } from 'vue';
// const add = (a,b) => {
//     return a+b
// }
// const sum = reactify(add)
// const a = ref(1)
// const b = ref(2)
// const res = sum(a,b)
// console.log(res.value)

// a.value = 10
// console.log(res.value)


// import testModel from './model.vue'
// import {ref} from 'vue'
// const name = ref('mystic333')
// const age = ref(18)


// import {useVirtualList} from '@vueuse/core'
// const {containerProps, wrapperProps, list} = useVirtualList(Array.from(Array(9999).keys()), {
//     itemHeight: 20
// })


// import {useCurrentElement} from '@vueuse/core'
// const el = useCurrentElement()
// console.log(el)


// import {useTransition,TransitionPresets} from '@vueuse/core'
// import {ref} from 'vue'
// const counter = ref(1)
// const output = useTransition(counter, {
//     duration: 1000,
//     transition: TransitionPresets.easeInOutCubic
// })
// console.log(output)

// const onClick = () => {
//     counter.value = 1000
// }

// import {useWebWorker} from '@vueuse/core'
// const {post, terminate, data, worker} = useWebWorker('/components/vueuse/allTest/worker.js')
// post('hello worker')


// import {useTitle} from '@vueuse/core'
// const title = useTitle()
// title.value = 'title vue use'


// import {useFullscreen} from '@vueuse/core'
// import {ref} from 'vue'
// const el = ref(null)
// const {exit, enter, toggle, isFullscreen} = useFullscreen(el)


// import {useCssVar} from '@vueuse/core'
// import {ref} from 'vue'
// const el = ref(null)
// const color = useCssVar('--color', el, {initialValue: '#eee'})
// color.value = 'red'


// import {useColorMode} from '@vueuse/core'
// const mode = useColorMode({
//     attribute: 'theme',
//     modes: {
//         cafe: 'cafe',
//         dim:'dim'
//     }
// })
// mode.value = 'dark'
// console.log(mode)


// import {useClipboard} from '@vueuse/core'
// import {ref} from 'vue'
// const source = ref('hello')
// const {text, copy,copied, isSupported } = useClipboard({source})
// console.log(text)


// import {useBrowserLocation} from '@vueuse/core'
// const location = useBrowserLocation()
// console.log(location)


// import {useWindowSize} from '@vueuse/core'
// const {width, height} = useWindowSize()


// import {useWindowScroll} from '@vueuse/core'
// const {x,y} = useWindowScroll()


// import {useWindowFocus} from '@vueuse/core'
// const focused = useWindowFocus()


// import {useResizeObserver} from '@vueuse/core'
// import {ref} from 'vue'
// const el = ref(null)
// const text = ref(null)
// useResizeObserver(el,(entries) => {
//     const entry = entries[0]
//     const {width, height} = entry.contentRect
//     text.value = `width: ${width} height${height}`
// })


// import {useMouseInElement} from '@vueuse/core'
// import {ref} from 'vue'
// const el = ref(null)
// const {x, y, elementX, elementY, isOutside} = useMouseInElement(el)


// import {useElementVisibility} from '@vueuse/core'
// import {ref} from 'vue'
// const el = ref(null)
// const isTargetVisible = useElementVisibility(el)


// import {useElementSize} from '@vueuse/core'
// import {ref} from 'vue'
// const rect = ref(null)
// const {width, height} = useElementSize(rect)


// import {useElementBounding} from '@vueuse/core'
// import {ref} from 'vue'
// const bound = ref(null)
// const {x,y, left, top, bottom, right, width, height} = useElementBounding(bound)


// import {useDropZone} from '@vueuse/core'
// import {ref} from 'vue'
// const dropzone = ref(null)
// const {isOverDropZone} = useDropZone(dropzone, (filelist) => {
//     console.log(filelist)
// })


// import {useDraggable} from '@vueuse/core'
// import {ref} from 'vue'
// const dragEl = ref(null)
// const {x, y, style} = useDraggable(dragEl, {initialValue: {x: 10, y: 10}})


// import {useDocumentVisibility} from '@vueuse/core'
// import {ref, watch} from 'vue'
// const visible = useDocumentVisibility()
// const res = ref([])
// watch(visible, (val) => {
//     res.value.push(val)
// })


// import {useActiveElement} from '@vueuse/core'
// import {watch} from 'vue'

// const activeElement = useActiveElement()
// console.log(activeElement)
// watch(activeElement, (el) => {
//     console.log(el.value)
// })


// import {useManualRefHistory} from '@vueuse/core'
// import {ref} from 'vue'
// const counter = ref(1)
// const {history,commit, undo, redo} = useManualRefHistory(counter)

</script>

